<template>
    <el-card>
        <div slot="header" class="clearfix">登记批次</div>
        <el-row :gutter="10" style="margin-bottom:15px">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">基本信息</div>
                    <div class="text item">
                        <el-form :inline="true" :model="info" class="demo-form-inline">
                            <el-form-item label="产品名称">
                                <el-select v-model="info.productName" placeholder="产品名称">
                                    <el-option v-for="item in productinfo" :key="item.id" :label="item.name" :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="产品id">
                                <el-input v-model="info.productId" placeholder="产品SKU" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="生产日期">
                                <el-date-picker v-model="info.jobTime" type="datetime" placeholder="选择日期时间" align="right" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="数量">
                                <el-input-number v-model="info.productWeight" :min="1" label="描述文字"></el-input-number>
                            </el-form-item>
                            <el-form-item label="加工状态">
                                <el-select v-model="info.status" placeholder="加工状态">
                                    <el-option label="加工中" value="1"></el-option>
                                    <el-option label="加工结束" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单位">
                                <el-input v-model="info.unit" style="width:80px"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-select v-model="info.registrant" placeholder="负责人姓名">
                                    <el-option v-for="item in staffinfo" :key="item.id" :label="item.username" :value="item.username"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card" style="margin-bottom:10px">
                    <div slot="header" class="clearfix">作业流程</div>
                    <div class="text item">
                        <span v-for="item in craft" :key="item.id" class="craft">
                            <el-tag type="success" @click="addcraft(item.name)">{{item.name}}</el-tag>
                        </span>
                        <div style="width:100%;margin-top:5%">
                            <el-input placeholder="请选择工艺" v-model="info.description" clearable></el-input>
                        </div>
                    </div>
                </el-card>
                <!-- <el-card class="box-card">
                    <div slot="header" class="clearfix">原辅料配置</div>
                    <div class="text item">
                        后端这个模块没有关于这个的字段....等他改
                    </div>
                </el-card> -->
            </el-col>
            <el-col :push="20">
                <el-button type="info" @click="closeaddress">取消</el-button>
                <el-button type="primary" @click="toaddinfo">添加</el-button>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { getAllInfoByPage } from '../../../Api/processingplant/process_product_infomation'
import { getAllInfoByPage as getAllcraftByPage } from '../../../Api/processingplant/process_craft'
import { addInfo } from '../../../Api/processingplant/process_job'
export default {
    name: 'AddProcessBatch',
    props: {
        processId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            // 产品信息
            productinfo: [],
            pageSize: 500,
            current: 1,
            info: {
                productName: '',
                factoryId: this.processId,
                productId: '',
                // 加工流程
                description: '',
                registrant: '',
                jobTime: '',
                productWeight: '',
                status: '',
                unit: '只',
            },
            // 存放工艺
            craft: [
                {id:10086,name: '浸洗'}
            ],
            // 加工流程
            technological_process: ''
        }
    },
    computed: {
        ...mapState({
            staffinfo: state => state.roleInfo.staffInfo
        })
    },
    watch: {
        'info.productName': {
            handler() {
                this.productinfo.map(item => {
                    if(item.name == this.info.productName) {
                        this.info.productId = item.id
                    }
                })
                
            }
        },
    },
    created() {
        this.getproductInfo()
        this.getcraft()
    },
    methods: {
        async getproductInfo() {
            await getAllInfoByPage(
                this.processId,
                this.current,
                this.pageSize,
            ).then(res => {
                this.productinfo = res.data.data.records;
            })
        },
        closeaddress() {
            this.$emit('closeaddress',false)
            this.info = {
                productName: '',
                productId: '',
                factoryId: '',
                description: '',
                registrant: '',
                jobTime: '',
                productWeight: '',
                status: '',
                unit: '只',
            }
        },
        async toaddinfo() {
            delete this.info.productName
            console.log(this.info);
            await addInfo(this.info).then(res => {
                if(res.data.statusCode !== 20000) {
                    this.$message.error('添加失败')
                }else {
                    this.$message.success('添加成功')
                    this.closeaddress()
                    this.$emit('getinfo')
                }
            })
        },
        async getcraft() {
             await getAllcraftByPage(1,1,500).then(res => {
                 this.craft = res.data.data.records
             })
        },
        // 点击添加作业流程
        addcraft(name) {
            if(this.info.description == '') {
                this.info.description = name
                return
            }
            this.info.description = this.info.description + '--' + name
        }
    }
}
</script>

<style lang="scss" scoped>
.craft {
    margin-left: 2%;
    cursor: pointer;
}
</style>